<template>
    <div>
        <div class="CommonStyles return" @click="fn">&lt&lt返回列表</div>

        <div id="top" class="CommonStyles">
            <div style="padding:20px 0 0 20px;">价格配置</div>
            <ul id="Price">
                <li>
                    <span>价格一：冲</span>
                    <input type="text" v-model="PriceOne">
                    <span>送</span>
                    <input type="text" v-model="giveOne">
                    <span style="margin-left:20px;">
                        <el-button type="success" @click="postData">保存</el-button>
                        
                    </span>
                </li>
                <li>
                    <span>价格二：冲</span>
                    <input type="text" v-model="PriceTwo">
                    <span>送</span>
                    <input type="text" v-model="giveTwo">
                    <span style="margin-left:20px;">
                        <el-button type="success" @click="postDataTwo">保存</el-button>
                        
                    </span>
                </li>
                <li>
                    <span>价格三：冲</span>
                    <input type="text" v-model="PriceThree">
                    <span>送</span>
                    <input type="text" v-model="giveThree">
                    <span style="margin-left:20px;">
                        <el-button type="success" @click="postDataThree">保存</el-button>
                        
                    </span>
                </li>
                <li>
                    <span>价格四：冲</span>
                    <input type="text" v-model="PriceFour">
                    <span>送</span>
                    <input type="text" v-model="giveFour">
                    <span style="margin-left:20px;">
                        <el-button type="success" @click="postDataFour">保存</el-button>
                    </span>
                </li>

            </ul>

        </div>

    </div>
</template>
  
<script>
export default {
    data() {
        return {
            PriceOne: '',
            giveOne: '',
            PriceTwo: '',
            giveTwo: '',
            PriceThree: '',
            giveThree: '',
            PriceFour: '',
            giveFour: '',
        };
    },
    methods: {
        fn: function () {
            this.$router.push("/home/czgl");
        },
        postData: function () {
            this.$axios({
                url: '/update/Combo',
                method: 'put',
                data: {
                    id:1,
                    give: this.giveOne,
                    recharge: this.PriceOne
                }
            }).then((res) => {
                if (res.data.code == 0) {
                    
                } else {
                }
            })
        },
        postDataTwo: function () {
            this.$axios({
                url: '/update/Combo',
                method: 'put',
                data: {
                    id:2,
                    give: this.giveTwo,
                    recharge: this.PriceTwo
                }
            }).then((res) => {
                if (res.data.code == 0) {
                    
                } else {
                }
            })
        },
        postDataThree: function () {
            this.$axios({
                url: '/update/Combo',
                method: 'put',
                data: {
                    id:3,
                    give: this.giveThree,
                    recharge: this.PriceThree
                }
            }).then((res) => {
                if (res.data.code == 0) {
                    
                } else {
                }
            })
        },
        postDataFour: function () {
            this.$axios({
                url: '/update/Combo',
                method: 'put',
                data: {
                    id:4,
                    give: this.giveFour,
                    recharge: this.PriceFour
                }
            }).then((res) => {
                if (res.data.code == 0) {
                  
                } else {
                }
            })
        },
        getData: function () {
            this.$axios({
                url: '/recharge',
                methods: 'get'
            }).then((res) => {
                if (res.data.code == 0) {
                    this.PriceOne=res.data.data[0].recharge,
                    this.PriceTwo=res.data.data[1].recharge,
                    this.PriceThree=res.data.data[2].recharge,
                    this.PriceFour=res.data.data[3].recharge,
                    this.giveOne=res.data.data[0].give,
                    this.giveTwo=res.data.data[1].give,
                    this.giveThree=res.data.data[2].give,
                    this.giveFour=res.data.data[3].give

                } else {
                }
            })
        }
    },
    mounted: function () {
        this.getData()

    }
};
</script>
  
<style lang="less" scoped>
input {
    outline: none
}

.CommonStyles {
    text-align: left;
    line-height: 0px;
    padding: 0px;
}

.return {
    color: aqua;
}

li {
    list-style: none
}

#top {
    margin-top: 20px;
    width: 665px;
    height: 338px;
    background: #d7d7d7;
}

#Price {
    display: flex;
    height: 320px;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
</style>


  